<#assign pageTitle = "优惠券" />
<#assign pageHeader>
	<script type="text/javascript">
		$(function() {
			yhqPos();//优惠券图片的垂直居中
		});
		function yhqPos(){
			$(".coupon-list li .u-coup-box").each(function(){
				var _this=$(this);
				var tHeight=_this.children(".coupon-left").height();
				var tWidth=_this.children(".coupon-left").width();
				_this.height(tHeight).width(tWidth);
			})

		}
		function activeCoupon() {
			layer.open({
				type: 1
				, title: '优惠券兑换'
				, content: $('#active-template').html()
				, btn: ['兑换', '取消']
				, yes: function (index, layero) {
					/*获取输入的优惠券编码*/
					var couponCode = $("#couponCode").val();
					if (couponCode===''){
						return layer.msg('请输入的优惠券编码！');
					}
					$.ajax({
						url: "/user/coupon/active.json",
						type: 'post',
						data: {"couponCode": couponCode},
						dataType: 'json',
						success: function (result) {
							if (result.code === 0) {
								location.reload();
							} else {
								return layer.msg(result.msg);
							}
						}
					})
				}
			});
		}
	</script>
</#assign>
<#assign pageContent>
	<article class="w80 fl">
		<div class="u-r-cont">
			<section class="u-r-tit-all clearfix">
				<h2 class="unFw fl">
					<span class="current">我的优惠劵</span>
				</h2>
				<section class="u-o-right fr tar mr20 mt13">
					<a class="cou-kscp" href="javascript:void (0)" onclick="activeCoupon();" title="优惠券兑换">优惠券兑换</a>
				</section>
			</section>
			<section class="u-r-all-box">
				<#if couponList??>
					<div class="coupon-box-wrap">
						<div class="coupon-wrap-list of">
							<ul class="coupon-list clearfix">
								<#list couponList as coupon>
									<li>
										<div class="u-coup-box <#if (coupon.status==3||coupon.status==4||coupon.status==6)>u-coup-box-ygq</#if> ">
											<div class="coupon-left">
												<div class="cou-l-box">
													<div>
														<span class="cou-left-num">编码：${coupon.couponCode}</span>
													</div>
													<div class="c-mon-wrap tar">
														<span class="fsize30 f-fM c-fff vam">￥</span>
														<span class=" fsize46 f-fM c-fff vam">${coupon.amount}</span>
														<span class="fsize24 f-fM c-fff vam">优惠劵</span>
													</div>
													<div class="cou-l-box-bottom clearfix">
														<span class="c-999 f-fM dis fl fsize14">
															有效期：
															${coupon.startTime?string("yyyy-MM-dd")} ~ ${coupon.endTime?string("yyyy-MM-dd")}
														</span>
														<#if coupon.status!=5>
															<span class="dis fr">
															<#if coupon.status==1><tt class="fsize14 f-fM c-master">未使用</tt></#if>
																<#if coupon.status==2><tt class="fsize14 f-fM c-999">已使用</tt></#if>
																<#if coupon.status==3><tt class="fsize14 f-fM c-999">已过期</tt></#if>
																<#if coupon.status==4><tt class="fsize14 f-fM c-999">已作废</tt></#if>
																<#if coupon.status==6><tt class="fsize14 f-fM c-999">已冻结</tt></#if>
															</span>
														</#if>
														<#if coupon.status==5><span class="c-red f-fM dis fr fsize14">即将过期</span></#if>
													</div>
													<#if coupon.status==2>
														<div class="u-coup-ygq-ico">
															<img src="/static/qdxwx/img/coupon-ysy.png" width="100%" height="100%" class="dis">
														</div>
													</#if>
													<#if coupon.status==3>
														<div class="u-coup-ygq-ico">
															<img src="/static/qdxwx/img/coupon-expired.png" width="100%" height="100%" class="dis">
														</div>
													</#if>
													<#if coupon.status==4>
														<div class="u-coup-ygq-ico">
															<img src="/static/qdxwx/img/coupon-yzf.png" width="100%" height="100%" class="dis">
														</div>
													</#if>
													<#if coupon.status==5>
														<div class="u-coup-jjgq-ico">
															<img src="/static/qdxwx/img/yhj-jjgq.png" class="dis" width="100%" height="100%">
														</div>
													</#if>
													<#if coupon.status==6>
														<div class="u-coup-ygq-ico">
															<img src="/static/qdxwx/img/coupon-djz.png" width="100%" height="100%" class="dis">
														</div>
													</#if>
												</div>
											</div>
											<div class="u-conbg-box">
												<#if (coupon.status==3||coupon.status==4||coupon.status==6)>
													<img src="/static/qdxwx/img/new-yhj-bg-gq.png">
												</#if>
												<#if (coupon.status!=3&&coupon.status!=4&&coupon.status!=6)>
													<img src="/static/qdxwx/img/new-yhj-bg.png">
												</#if>
											</div>
										</div>
									</li>
								</#list>
							</ul>
						</div>
						<!-- 公共分页 开始 -->
						<div class="paging" id="showPages"></div>
						<!-- 公共分页 结束 -->
					</div>
				<#else>
					<section class="no-data-wrap">
						<em class="icon30 no-data-ico">&nbsp;</em>
						<span class="c-666 fsize14 ml10 vam">很遗憾！你还没有优惠券哦</span>
					</section>
				</#if>
			</section>
		</div>
	</article>
	<!-- /右侧内容区 结束 -->
	<script type="text/html" id="active-template">
		<div class='d-tips-7'>
			<ul class='l-r-w-Inpt'>
				<li>
					<label class='vam'>优惠券：</label>
					<input type='text' id='couponCode' name='' value='' class='lTxt' placeholder="请输入的优惠券编码！">
				</li>
			</ul>
		</div>
	</script>
</#assign>
<#assign pageFooter>
	<script type="text/javascript" src="/static/js/page.js"></script>
	<script type="text/javascript">
		var options = {
			currentPage : ${page.currentPage}
			,totalPage : ${totalPages}
		};
		$(function () {
			showPages(options);
		});
	</script>
</#assign>
<#include "../layouts/layout_uc.ftl">